<template>
  <div id="home">
    <div class="home">
      <el-col :span="4">
        <h2 class="flex align-center">
          <img src="../../assets/images/home/feedback-center.png" alt="" />
          反馈中心
        </h2>
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="this.$route.fullPath"
          background-color="#F5F8FB"
          text-color="#C0C0C0"
          router
        >
          <el-menu-item :index="feedUrl">
            <img
              v-show="feedActive"
              src="../../assets/images/home/feed-active.png"
              alt=""
            />
            <img
              v-show="!feedActive"
              src="../../assets/images/home/feed.png"
              alt=""
            />
            <span slot="title" :class="[feedActive ? 'activeColor' : '']"
              >意见反馈</span
            >
          </el-menu-item>
          <el-menu-item :index="recordUrl">
            <img
              v-show="repActive"
              src="../../assets/images/home/report-active.png"
              alt=""
            />
            <img
              v-show="!repActive"
              src="../../assets/images/home/report.png"
              alt=""
            />
            <span slot="title" :class="[repActive ? 'activeColor' : '']"
              >反馈记录</span
            >
          </el-menu-item>
          <div
            class="cursor login-out"
            @click="openDia"
            style="
              padding: 16px 0 16px 22px;
              font-weight: 700;
              font-size: 18px;
              color: #c0c0c0;
            "
          >
            <img
              src="../../assets/images/home/login-out.png"
              style="vertical-align: middle; margin: 0 4px 0 0;"
              alt=""
              srcset=""
            />
            退出登录
          </div>
        </el-menu>
      </el-col>
      <el-main>
        <keep-alive>
          <router-view />
        </keep-alive>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      feedActive: true,
      repActive: false,
      url: "",
      cityname: "",
      recordUrl: "",
      feedUrl: "",
    };
  },

  created() {
    if (this.$route.query.cityname && this.$route.query.url) {
      let cityname = encodeURIComponent(this.$route.query.cityname);
      this.feedUrl = `/?cityname=${cityname}&url=${this.$route.query.url}`;
      this.recordUrl = `/record?cityname=${cityname}&url=${this.$route.query.url}`;
    } else {
      this.feedUrl = "/";
      this.recordUrl = "/record";
    }

    if (this.$route.path == "/") {
      this.feedActive = true;
      this.repActive = false;
    } else if (this.$route.path == "/record") {
      this.feedActive = false;
      this.repActive = true;
    }
  },

  updated() {
    if (this.$route.path == "/") {
      this.feedActive = true;
      this.repActive = false;
    } else if (this.$route.path == "/record") {
      this.feedActive = false;
      this.repActive = true;
    }
  },
  methods: {
    changeIcon(idx) {
      if (idx == 1) {
        this.feedActive = true;
        this.repActive = false;
      } else if (idx == 2) {
        this.feedActive = false;
        this.repActive = true;
      }
    },

    openDia() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          localStorage.removeItem("token")
          if (this.$route.query.cityname && this.$route.query.url) {
            let cityname = encodeURIComponent(this.$route.query.cityname);
            this.$router.replace(`/login?cityname=${cityname}&url=${this.$route.query.url}`);
          }else{
            this.$router.replace(`/login`);
          }
          
        }).catch(()=>{

        })
    },
  },
};
</script>

<style>
.el-main {
  padding: 0 !important;
}
#home {
  min-width: 1250px;
  box-sizing: border-box;
  height: 100vh;
  padding: 24px 0 0;
  background: url(../../assets/images/home/home_banner.png) no-repeat fixed;
}
.home {
  margin: 0 11vw 0;
  height: 94vh;
  background-color: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
}

.el-col-4 {
  height: 94vh;
  background-color: #eceff4;
}

.el-menu-item {
  border-left: 2px solid transparent;
}
.el-menu-item span {
  font-size: 18px;
  font-weight: 700;
}
.el-menu-item img {
  margin: 0 10px 0 0;
}
.is-active {
  border-left: 2px solid #0066ff;
}

h2 {
  height: 3%;
  margin: 34px 0 34px 22px;
  font-size: 20px;
  font-weight: 400;
}

h2 img {
  margin: 4px 10px 0 0;
}

.activeColor {
  color: #0066ff !important;
}
.login-out:hover{
  background-color: rgba(0,0,0,.2);
}
</style>